<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo-11-条件渲染</title>
    <script type="text/javascript" src="../JS/vue.js"></script>
</head>
<body>
<!-- 条件渲染
    1.v-show
        写法: v-show="表达式"
        适用于: 切换频率较高的场景
        特点: 不展示的DOM元素未被移除,仅仅是使用样式隐藏掉了

    2.v-if
        写法: v-if="表达式"
        适用于: 切换频率较低的场景
        特点: 不展示的DOM元素直接被移除掉了
        注意: v-if 可以和 v-else 和 v-else-if 一起使用, 但是要求结构不能被打断

    3.备注: 使用 v-if 的时候,元素可能无法获取到, 而使用 v-show 一定可以获取到 -->

<div id="root">
    <h3>当前n的值为: {{ n }}</h3>
    <button @click="n++">点我n+1</button>

    <!-- 使用 v-show 做条件渲染 -->
    <h3 v-show="false">欢迎来到{{ name }}</h3>
    <h3 v-show="1 === 1">欢迎来到{{ name }}</h3>

    <!-- 使用 v-if 做条件渲染 -->
    <div v-if="n === 1">Angular</div>
    <div v-else-if="n === 2">React</div>
    <div v-else>Vue</div>

    <!-- 使用 template 标签做条件渲染不会添加新的结构 -->
    <template v-if="n === 4">
        <h3>你好</h3>
        <h3>{{ name }}</h3>
        <h3>北京</h3>
    </template>
</div>

<script text="text/javascript">
    const vm = new Vue({
        el: '#root',

        data: {
            n: 0,
            name: '尚硅谷',
        },
    })
</script>
</body>
</html>